<template>
<div>
    <el-dialog :visible.sync="configureit.dialogAddVersion" size="tiny">
        <p class="dialog-title">配置</p>
        <el-form :model="version" :rules="rules" ref="version" label-width="100px">
            <el-row :gutter="30">
                <el-col :span="23" v-if="configureit.relayType=='0'">
                    <el-form-item label="电板编号" prop="relayId">
                        <el-select v-model="version.relayId" style="width:100%" placeholder="请选择电板编号" @change="relayTypeChange">
                            <el-option v-for="item in relayIdList" :key="item.relayId" :label="item.relayNumber" :value="item.relayId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="23" v-if="configureit.relayType=='0'">
                    <el-form-item label="继电器编号" prop="relayNumber">
                        <el-select v-model="version.relayNumber" style="width:100%" placeholder="请选择继电器编号">
                            <el-option v-for="(item,index) in relayNumberList" :key="relayNumberList[index]" :label="relayNumberList[index]" :value="relayNumberList[index]"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="23" v-if="configureit.relayType=='1'">
                    <el-form-item label="喇叭编号" prop="hornNumber">
                        <el-select v-model="version.hornNumber" style="width:100%" placeholder="请选择喇叭编号">
                            <el-option v-for="(item,index) in hornNumberList" :key="hornNumberList[index]" :label="hornNumberList[index]" :value="hornNumberList[index]"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <p class="btn">
            <el-button @click="resetFormdelDialogAddTea('version')">关 闭</el-button>
            <el-button type="primary" @click="addVersion('version')" :loading="loadingBtn">保 存</el-button>
            </p>
        </div>
    </el-dialog>
</div>
</template>
<script>
import { getConfig, listChannelNumberByPanels, listPanelsByConfig} from 'api/attendanceManage';
export default {
    props: {
        configureit: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            loadingBtn: false,
            version: {
                deviceName: '',
                relayNumber: '',
                relayId: '',
                hornNumber: ''
            },
            relayIdList: [],
            relayNumberList: [],
            hornNumberList: [],
            rules: {
                relayId: [
                    { required: true, message: '请选择继电板编号', trigger: 'change' }
                ],
                relayNumber: [
                    { required: true, message: '请选择继电器编号', trigger: 'change' }
                ],
                hornNumber: [
                    { required: true, message: '请选择喇叭编号', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        this.getNumber();
    },
    methods: {
        addVersion(version) {
            this.$refs[version].validate((valid) => {
                if (valid) {
                    this.loadingBtn = true;
                    let relayNumber = '';
                    let relayId = '';
                    if (this.configureit.relayType=='0') {
                        relayNumber = this.version.relayNumber;
                        relayId = this.version.relayId;
                    } else {
                        relayNumber = this.version.hornNumber;
                        relayId = this.configureit.relayId;
                    }
                    getConfig(relayId, relayNumber, this.configureit.classId).then(res => {
                        this.loadingBtn = false;
                        this.$message({
                            type: 'success',
                            message: '配置成功'
                        })
                        this.delDialogAddTea();
                        this.$emit('success', res)
                    })
                } else {
                    return false;
                }
            });
        },
        getPanels() {
            let schoolId = this.$route.params.id.split(';')[1];
            let deviceId = this.$route.params.id.split(';')[2];
            listPanelsByConfig(schoolId, deviceId).then(res => {
                this.relayIdList = res.data.content
            })
        },
        getlistNumber() {
            listChannelNumberByPanels(this.configureit.relayId, this.configureit.relayType).then(res => {
                this.hornNumberList = res.data.content
            })
        },
        handleClose() {
            this.$refs.version.resetFields();
            this.delDialogAddTea();
        },
        getNumber() {
            if (this.configureit.relayType=='0') {
                this.getPanels();
            } else {
                this.getlistNumber();
            }
        },
    // 取消按钮 
        resetFormdelDialogAddTea(dataForm) {
            this.$refs[dataForm].resetFields();
            this.delDialogAddTea();
        },
    // 还原清空弹窗信息
        delDialogAddTea() {
            this.loadingBtn = false;
            this.version.relayNumber = '';
            this.version.relayNumberList = [];
            this.version.deviceName = '';
            this.configureit.dialogAddVersion = false;
        },
        relayTypeChange(id) {
            listChannelNumberByPanels(id, this.configureit.relayType).then(res => {
                this.relayNumberList = res.data.content
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .el-form{
        padding-left:16px;
    }
    .dialog-title{
        width:60%;
        margin:0 auto;
    }
</style>


